<template>
  <view class="draw-body">
    <view class="dialog-box">
      <image
        class="bg-image absolute top-0 left-0 w-320px h-344px"
        :src="currentBg"
      />
      <template v-if="couponStatus === 'default'">
        <image
          class="w-237px h-125px mx-auto mt-29px"
          :src="ossImg('others/couponcode/title.png')"
        />
        <view class="code-input">
          <input
            v-model="couponCode"
            placeholder="请输入兑换码"
            placeholder-style="color: #75ADF8;font-weight: 400"
            @click="inputCouponCode"
          />
          <image
            class="w-260px h-60px"
            :src="ossImg('others/couponcode/input.png')"
          />
        </view>
        <view class="text-12px text-white text-center"
          >优惠券将在确认领取后5-30分钟后到账</view
        >
        <image
          class="w-180px h-53px mx-auto mt-23px"
          :src="ossImg('others/couponcode/btn.png')"
          @click.stop="handleSubmit"
        />
      </template>
      <template v-if="couponStatus === 'error'">
        <image
          class="w-237px h-200px mx-auto mt-29px"
          :src="ossImg('others/couponcode/err/err_tips.png')"
        />
        <image
          class="w-180px h-53px mx-auto mt-39px"
          :src="ossImg('others/couponcode/err/but_close.png')"
          @click.stop="closeErr"
        />
      </template>
      <template v-if="couponStatus === 'success'">
        <image
          class="w-237px h-100px mx-auto mt-29px"
          :src="ossImg('others/couponcode/success/title.png')"
        />
        <image class="w-199px h-106px mx-auto mt-13px" :src="couponInfo.icon" />
        <view class="text-12px text-white text-center mt-12px mb-17px"
          >优惠券将在确认领取后5-30分钟后到账</view
        >
        <view class="flex justify-center">
          <image
            class="w-114px h-42px mr-17px"
            :src="ossImg('others/couponcode/success/use_btn.png')"
            @click.stop="toGoods"
          />
          <image
            class="w-114px h-42px"
            :src="ossImg('others/couponcode/success/view_btn.png')"
            @click.stop="lookCode"
          />
        </view>
      </template>
    </view>
    <image
      class="w-20px h-20px mx-auto mt-12px"
      :src="ossImg('others/couponcode/close.png')"
      @click.stop="emits('close')"
    />
  </view>
</template>

<script setup>
import { ref, computed, defineEmits } from "vue";
import { ExchangeCouponCode } from "@/services/coupon";
import { ossImg } from "@/utils/utils";

const emits = defineEmits(["close", "submit", "upData", "use"]);
const couponCode = ref("");
const couponStatus = ref("default");
const couponInfo = ref({});
const miniProgram = wx.getAccountInfoSync().miniProgram;
const currentBg = computed(() => {
  const bg = {
    default: ossImg("others/couponcode/bg.png"),
    error: ossImg("others/couponcode/err/err_bg.png"),
    success: ossImg("others/couponcode/success/bg.png"),
  };
  return bg[couponStatus.value];
});

const handleSubmit = async () => {
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code",
    "click",
    "confirm_pickup",
    ""
  );
  // 判断是否登录
  if (
    getApp().globalData.user.nickname === null ||
    getApp().globalData.user.nickname === "" ||
    getApp().globalData.user.nickname === undefined
  ) {
    return getApp().getWechatUserProfile({
      path: "/personalPages/coupon/coupon",
      navigateBack: true,
    });
  }
  if (
    getApp().globalData.user.phone === null ||
    getApp().globalData.user.phone === ""
  ) {
    uni.setStorageSync(
      "REDIRECT_URI",
      JSON.stringify({ path: "/personalPages/coupon/coupon" })
    );
    getApp().emdlz(
      "track",
      "event",
      "coupons_redemption_code",
      "pagejump",
      "enroll",
      ""
    );

    uni.navigateTo({ url: "/pages/vip/register" });
    return;
  }

  if (!couponCode.value)
    return uni.showToast({ icon: "none", title: "劵码不能为空" });
  try {
    const { code, data } = await ExchangeCouponCode({
      code: couponCode.value,
      appId: miniProgram.appId,
    });
    switch (code) {
      case 422:
        couponStatus.value = "error";
        break;
      case 200:
        uni.showToast({ title: "兑换成功", icon: "none" });
        if (data) couponInfo.value = data || {};
        couponStatus.value = "success";
        emits("upData");

        break;
    }
  } catch (e) {
    couponStatus.value = "error";
  }
};

const inputCouponCode = () => {
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code",
    "click",
    "input_code",
    ""
  );
};

const toGoods = () => {
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code_receive",
    "click",
    "use_now",
    ""
  );
  uni.redirectTo({
    url: `/pages/goods/goods?id=${"867fa300a617455059da64cfccc0cc60"}`,
  });
  // uni.switchTab({
  //   url: "/pages/home/home",
  // });
};

const lookCode = () => {
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code_receive",
    "click",
    "view_coupon",
    ""
  );
  emits("close");
  emits("upData");
};

const closeErr = () => {
  couponStatus.value = "default";
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code_unable_receive",
    "click",
    "close",
    ""
  );
};
</script>

<style lang="scss" scoped>
.draw-body {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.dialog-box {
  width: 640rpx;
  height: 688rpx;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  position: relative;
  z-index: 0;
  .bg-image {
    position: absolute;
    z-index: -1;
  }
  image {
    display: block;
    z-index: 11;
  }
  .code-input {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 22rpx 0 16rpx 0;
    input {
      width: 420rpx;
      position: absolute;
      color: white;
      font-size: 19px;
      height: 16px;
      top: 19px;
      text-align: center;
      font-weight: bold;
      z-index: 99;
    }
  }
}
</style>
